<template>
  <div class="sucaihuo-container nav-all-panel">
    <a :class="{
    'nav-all-title':true,
    'active':activeFlag
    }"
       @click="showAllMenu"
    ><i class="fa fa-reorder"></i>所有菜单</a>
    <div id="naTQ" class="query-clean-box" :style="{'display':showBox,'height':'auto'}">
      <div class="query-box form-group clean-group">
        <input id="menu-search-input" autocomplete="off" type="text" class="form-control" placeholder="菜单名称关键字">
        <a class="input-clean-btn" role="button"></a>
        <a role="button" class="query-btn"><i class="fa fa-search"></i></a>
      </div>
      <div class="query-results-list menu-list-select">
        <ul class="query-results-list-body"></ul>
      </div>
      <ul v-metis-menu class="metismenu nav-all default-list" id="menu"  @click.stop="showIndex($event)">
        <li  class="active menu-firstList">
          <a class="has-arrow toggle toggle-first">
            <img src="/static/resources/img/menu/index/cycd.png"><label>常用菜单</label>
          </a>
          <ul class="custem-menu">
            <li
              v-if="customMenus.status === 'SUCCESS' || customMenus.body.length>0"
              v-for="item of customMenus.body"
              @click="customMenuClickFunction(item.uumsFunction)"
              :menuCode="item.uumsFunction.functionCode">
							
              <a class="toggle">
                {{item.uumsFunction.functionName}}
              </a>
            </li>
          </ul>
        </li>
        <li
        	v-if="showRootCom && indexMenuData !==''" 
        	v-for="(v,k) in indexMenuData" 
        	:showDir="showDir[k]"
        	:is="indexMenuCom" 
        	:rootItem="v" 
        	:uapMenuVos="indexMenu" 
        	:key="k">
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {getFarther} from '../../utils/utils'
  import indexMenuCom from './indexMenu'
  import store from '../../store/store'
  import {mapState} from 'vuex'
    export default {
        name: "menu-com",
        store,
        data(){
          return {
            indexMenuCom:indexMenuCom,
            activeFlag:false,
            indexMenuData:'',
            showBox:'none',
            showRootCom:false,
            showDir:[]
          }
        },
        computed:{
          ...mapState('menusStore',['customMenus','indexMenu'])
        },
        methods:{
          customMenuClickFunction(uumsFunction){
            openTab(
              uumsFunction.functionName,
              uumsFunction.functionUrl,
              uumsFunction.pageEmbedType,
              uumsFunction.functionCode,
              uumsFunction.sourceSystem,
              uumsFunction.parentFunction,
              CUSTOM_MENU_ACCESS
            );
          },
          showAllMenu(){
            if(this.activeFlag){
              this.activeFlag = false;
              this.showBox = 'none';
            }else{
              this.activeFlag = true;
              this.showBox = 'block';
              this.showRootCom = true;
              this.$nextTick(function(){
              	let doms = document.querySelectorAll('#menu>li')
                for(let i = 0;i < doms.length;++i){
          				doms[i].k = i - 1;
          			}
            	})
            }
          },
          showIndex(e){
            let dom = getFarther('menu-firstList',e.target);
            if(dom.classList.contains('active')){
              dom.classList.remove('active')
            }else{
              let firstLi = document.querySelectorAll('#menu>.menu-firstList');
              for(let i = 0;i < firstLi.length;++i){
                firstLi[i].classList.remove('active');
              }
              if(dom.k !== -1){
              	this.showDir.splice(dom.k,1,true);
              	this.$nextTick(function(){
              		let doms = dom.querySelectorAll('ul>li')
                		for(let i = 0;i < doms.length;++i){
          						doms[i].k = i;
          					}
           			})
              }
              dom.classList.add('active');
            }
          }
        },
      	watch:{
        	indexMenu(r){
          if(r !== ''){
            this.indexMenuData = [];
            for(let i = 0;i<r.length;++i){
              if(r[i].uumsFunction.parentFunction === '0'){
                this.indexMenuData.push(r[i]);
                this.showDir.push(false);
              }
            }
          }
        }
      	}
    }
</script>

<style>
#menu .menu-firstList.active>ul{
  display: block;
}
#menu .menu-firstList>ul{
  display: none;
}
</style>
